<template>
  <div class="login-content">
    <div style="position: relative; width: 100%; height: 100%">
      <p style="font-size: 16px;color: #e5e5e5;margin: 10px;text-align: center">重置密码</p>
      <div class="login-main">
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm">
          <el-form-item prop="phone">
            <el-input
              v-model="dataForm.phone"
              placeholder="请输入手机号"
              type="tel"
            />
          </el-form-item>
          <el-form-item prop="verificationCode">
            <el-row :gutter="20">
              <el-col :span="14">
                <el-input v-model="dataForm.verificationCode" placeholder="验证码"></el-input>
              </el-col>
              <el-col :span="8" class="login-captcha">
                <el-button
                  :disabled="isButtonDisabled"
                  type="primary"
                  style="padding: 10px 12px"
                  @click="getVerificationCode(dataForm.phone)"
                >
                  {{ buttonText }}
                </el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item prop="newPassword">
            <el-input
              v-model="dataForm.newPassword"
              type="password"
              placeholder="新密码"
              autocomplete="off"
              prefix-icon="el-icon-lock"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item prop="confirmPassword">
            <el-input
              v-model="dataForm.confirmPassword"
              type="password"
              placeholder="确认密码"
              prefix-icon="el-icon-lock"
              show-password
            ></el-input>
          </el-form-item>
          <el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">确 定</el-button>
        </el-form>
        <span @click="handleGetPwd()" style="padding: 5px;float: right;color: #EBEEF5; cursor: pointer;">返回登录</span>
      </div>
    </div>
  </div>

</template>

<script>

export default {
  data() {
    return {
      loginFlag: false,
      infoFlag: false,
      countdown: 60,
      timer: null,
      isButtonDisabled: false,
      buttonText: '获取验证码',
      dataForm: {
        phone: '',
        verificationCode: '',
        newPassword: '',
        confirmPassword: ''
      },
      dataRule: {
        phone: [
          {required: true, message: '手机号不能为空', trigger: 'blur'},
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '请输入有效的中国大陆手机号',
            trigger: 'blur'
          }
        ],
        verificationCode: [
          {required: true, message: '验证码不能为空', trigger: 'blur'}
        ],
        newPassword: [
          {required: true, message: '新密码不能为空', trigger: 'blur'}
        ],
        confirmPassword: [
          {required: true, message: '确认密码不能为空', trigger: 'blur'},
          {validator: this.checkConfirmPassword, trigger: 'blur'}
        ]
      },

    }
  },
  watch: {},
  created() {
    setTimeout(() => {
      this.resetForm()
    }, 900)

  },
  methods: {
    resetForm() {
      this.dataForm = {
        phone: '',
        verificationCode: '',
        newPassword: '',
        confirmPassword: '',
      };
    },
    checkConfirmPassword(rule, value, callback) {
      if (value !== this.dataForm.newPassword) {
        callback(new Error('确认密码与新密码不一致'));
      } else {
        callback();
      }
    },
    //返回登录
    handleGetPwd() {
      this.$emit("login");
    },
    // 获取验证码
    getVerificationCode(phone) {
      // 这里可以添加获取验证码的逻辑
      // 假设你已经成功发起验证码请求
      if (!phone){
        return this.$message.error('请输入手机号')
      }
      this.$http({
        url: this.$http.adornUrl('/sys/sendMsgCode'),
        method: 'post',
        data: this.$http.adornData({
          'phone': phone,
          'verificationCode': this.dataForm.verificationCode,
          'newPassword': this.dataForm.newPassword,
          'confirmPassword': this.dataForm.confirmPassword
        })
      }).then(({data}) => {
        if (data && data.code === 0) {

        }
      })
      this.startCountdown();
    },
    startCountdown() {
      if (this.timer) clearInterval(this.timer);
      this.isButtonDisabled = true;
      this.buttonText = `${this.countdown}秒后重试`;
      this.timer = setInterval(() => {
        this.countdown -= 1;
        this.buttonText = `${this.countdown}秒后重试`;

        if (this.countdown <= 0) {
          clearInterval(this.timer);
          this.isButtonDisabled = false;
          this.countdown = 60;
          this.buttonText = '获取验证码';
        }
      }, 1000);
    },

    // 确定
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl('/sys/retrievePassword'), //重置密码确定接口
            method: 'post',
            data: this.$http.adornData({
              'phone': this.dataForm.phone,
              'verificationCode': this.dataForm.verificationCode,
              'newPassword': this.dataForm.newPassword,
              'confirmPassword': this.dataForm.confirmPassword
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500
              })
              this.$emit("login");
            }
          })
        }
      })
    },


  }
}
</script>

<style lang="scss">
.login-captcha {
  display: flex;
  align-items: center;
  justify-content: center;
}

body, html {
  height: 100%
}

.login-header {
  height: 15%;
  background: #fff;
  position: relative;
}

.login-header h2 {
  position: absolute;
  left: 57px;
  top: 50%;
  transform: translate(0, -50%);
}

.login-banner {
  height: calc(100% - 80px - 15%);
  position: relative;
}

.banner-bg img, .banner-pic img {
  width: 100%;
  height: 100%;
}

.banner-bg {
  height: 100%;
}

.banner-pic {
  width: 47%;
  height: 70%;
  position: absolute;
  left: 15%;
  top: 50%;
  transform: translate(0, -50%);
  box-shadow: 0 0 20px 1px rgba(0, 0, 0, .5);
}

.login-content {
  background: rgba(255, 255, 255, 0.1);
  width: 22%;
  height: 70%;
  position: absolute;
  right: 15%;
  top: 50%;
  transform: translate(0, -50%);
  z-index: 100;
  border-radius: 8px;
}

.login-main {
  position: absolute;
  width: 80%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.login-main .el-form-item {
  margin-bottom: 22px;
}

.login-main .el-input__inner {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 5px;
  color: #fff;
}

.login-main .login-captcha img {
  width: 100%;
  height: 34px;
}

.login-main .el-icon-circle-close:before {
  content: '';
  background: url("../../assets/img/login_close.png");
  width: 16px;
  height: 16px;
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translate(0, -50%);
}

.login-main .el-icon-circle-check:before {
  content: '';
  background: url("../../assets/img/login_suc.png");
  width: 16px;
  height: 16px;
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translate(0, -50%);
}

.login-btn-submit {
  width: 100%;
  height: 50px;
  background-color: #1463a8;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  margin-top: 5px;
}

.el-carousel {
  height: 100%;
}

.el-carousel__container {
  height: 100%;
}

.login-footer {
  height: 80px;
  background: #fff;
  text-align: center;
  line-height: 80px;
  color: #999999;
}
</style>
